<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <title>用户信息修改</title>

  <!--导入CSS的全局样式-->
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <!--<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">-->
  <!--引入日期控制的CSS类库-->
  <link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
  <!--引入表单校验插件CSS类库-->
  <link href="css/bootstrapValidator.min.css" rel="stylesheet"/>

</head>
<body>
<div class="container" style="width: 500px; margin-top: 40px">
  <h3 style="text-align: center;">用户信息修改</h3>
  <form id="updateForm" action="user">

    <div class="form-group">
      <input type="hidden" id="uid" name="uid"/>
    </div>

    <div class="form-group">
      <label for="username">用户名：</label>
      <input type="text" name="username" class="form-control" id="username" placeholder="请输入用户名"/>
    </div>

    <div class="form-group">
      <label for="name">姓名：</label>
      <input type="text" name="name" class="form-control" id="name" placeholder="请输入昵称"/>
    </div>

    <div class="form-group">
      <label for="email">Email：</label>
      <input type="text" name="email" class="form-control" id="email" placeholder="请输入邮箱"/>
    </div>

    <div class="form-group">
      <label for="telephone">手机号：</label>
      <input type="text" name="telephone" class="form-control" id="telephone" placeholder="请输入手机号"/>
    </div>

    <div class="form-group">
      <label>性别：</label>
      <label class="radio-inline">
        <input type="radio" name="gender" id="gender" checked="checked" value="男"> 男
      </label>
      <label class="radio-inline">
        <input type="radio" name="gender" id="gender2" value="女"> 女
      </label>
    </div>

    <div class="form-group">
      <label for="birthday">出生日期：</label>
      <input class="form_datetime form-control" name="birthday" type="text" id="birthday" value="2019-11-14" size="16"
             readonly>
    </div>

    <div class="form-group">
      <label for="education">教育信息：</label>
      <input type="text" name="education" class="form-control" id="education" placeholder="请输入教育信息"/>
    </div>

    <div class="form-group">
      <label for="family">家庭信息：</label>
      <input type="text" name="family" class="form-control" id="family" placeholder="请输入家庭信息"/>
    </div>

    <div class="form-group">
      <label for="treatment">待遇信息：</label>
      <input type="text" name="treatment" class="form-control" id="treatment" placeholder="请输入待遇信息"/>
    </div>

    <div class="form-group">
      <label for="department">部门信息：</label>
      <input type="text" name="department" class="form-control" id="department" placeholder="请输入部门信息"/>
    </div>


    <hr/>
    <div class="form-group" style="text-align: center;">
      <button class="btn btn-lg btn-primary btn-block" name="submit_btn" type="submit" value="修改">确认修改</button>
    </div>
  </form>

  <!-- 出错显示的信息框 -->
  <div class="alert alert-warning alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert">
      <span>&times;</span>
    </button>
    <strong id="errorMsg">注册校验信息回显框</strong>
  </div>
</div>

<!-- jQuery导入,为相对兼容低版本浏览器我们选择2.x.x版本 -->
<script src="js/jquery-2.1.0.min.js"></script>
<!-- 导入bootstrap的js文件 -->
<script src="js/bootstrap.min.js"></script>

<!--bootstrap-datetimepicker.zh-CN.js表示可以使用中文的语言显示日期时间-->
<script src="js/bootstrap-datetimepicker.min.js"></script>
<script src="js/bootstrap-datetimepicker.zh-CN.js"></script>

<!--引入表单校验插件-->
<script src="js/bootstrapValidator.min.js"></script>
<script src="js/zh_CN.js"></script>

<script type="text/javascript">
    $(".form_datetime").datetimepicker({
        format: "yyyy-mm-dd",
        autoclose: true,
        todayBtn: true,
        todayHighlight: true,
        showMeridian: true,
        pickerPosition: "bottom-left",
        language: 'zh-CN',//中文，需要引用zh-CN.js包
        startView: 2,//月视图
        minView: 2//日期时间选择器所能够提供的最精确的时间选择视图
    });
</script>

<script type="text/javascript">

    $(function () {
        var uid = location.href.split('=')[1];

        $.get("/user/findUser", {uid: uid}, function (data) {

            $('#uid').val(data.uid);
            $('#username').val(data.username);
            $('#name').val(data.name);
            $('#email').val(data.email);
            $('#telephone').val(data.telephone);
            if (data.gender == '男') {
                $("#gender").prop("checked", true)
            } else {
                $("#gender2").prop("checked", true)
            }
            $('#birthday').val(data.birthday);
            $('#education').val(data.education);
            $('#family').val(data.family);
            $('#treatment').val(data.treatment);
            $('#department').val(data.department);
        });


        $('form').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                username: {
                    message: '用户名验证失败',
                    validators: {
                        notEmpty: {
                            message: '用户名不能为空'
                        },
                        stringLength: {
                            min: 5,
                            max: 18,
                            message: '用户名长度必须在6到18位之间'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_]+$/,
                            message: '用户名只能包含大写、小写、数字和下划线'
                        }
                    }
                },
                nickname: {
                    message: '昵称验证失败',
                    validators: {
                        notEmpty: {
                            message: '昵称不能为空'
                        },
                        stringLength: {
                            min: 2,
                            max: 12,
                            message: '昵称长度必须在6到18位之间'
                        }
                    }
                },
                email: {
                    validators: {
                        notEmpty: {
                            message: '邮箱不能为空'
                        },
                        emailAddress: {
                            message: '邮箱地址格式有误'
                        }
                    }
                },
                telephone: {
                    message: '手机号码验证失败',
                    validators: {
                        notEmpty: {
                            message: '手机号码不能为空'
                        },
                        stringLength: {
                            min: 11,
                            max: 11,
                            message: '手机号码长度必须为11位'
                        },
                        regexp: {
                            regexp: /^[0-9]+$/,
                            message: '用户名只能包含数字'
                        }
                    }
                }
            }
        })
            .on('success.form.bv', function (e) {//点击提交之后
                e.preventDefault();
                $.post("/user/updateUser", $("#updateForm").serialize(), function (data) {
                    if (data.flag) {
                        alert("修改成功")
                        location.href = "admin_list_userInfo.html";
                    } else {
                        $("#errorMsg").html(data.errorMsg);
                    }
                });
            });
    });

</script>

</body>
</html>